<?php
/**
 * Created by PhpStorm.
 * User: admin
 * Date: 2016/11/17
 * Time: 18:44
 * 支付信息頁面
 */

require('env.php');
require('init.inc.php');
include_once 'functions.php';
require('Utils.php');

$index_std = ShopConfig::getConfig();

$db_oid = $_GET['oid'];
if (isset($_GET['OrderProdDBId'])) {
    $OrderProdDBId = $_GET['OrderProdDBId'];
} else {
    $OrderProdDBId = '';
}

if (isset($_GET['order_sn'])) {
    $orderSn = $_GET['order_sn'];
} else {
    $orderSn = '';
}

$order = getOrdersBySn($orderSn);
if (!$order) {
    die("訂單號在本站不存在，請前往該產品站點進行支付，跨站支付目前不支持");
}
$shopCart = getShopCartBySn($orderSn);
$amount = "";
foreach ($shopCart as $sc) {
    $product = getProductById($sc['product_id']);
    $amount += ($product['products_special_price'] * $sc['product_nums']);
}


$currency = Utils::getValue(LANG, BASE_CONFIG . '/csv/currency.csv');


$tongji1 = home_tongji(1);
$tongji2 = home_tongji(2);
$tongji3 = home_tongji(3);
//$months = array("月份","01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12");
//$years = array("年份","2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025", "2026",
//    "2027", "2028", "2029", "2030", "2031", "2032", "2033", "2034", "2035", "2036", "2037", "2038", "2039",
//    "2040", "2041", "2042", "2043", "2044", "2045", "2046", "2047", "2048", "2049", "2050");
?>

<!DOCTYPE html>
<html>
<?php include("header.php"); ?>
<link rel="stylesheet" href="style/css/amazeui.min.css">
<script src="style/js/amazeui.min.js"></script>

<style type="text/css">
    /*    .am-selected-btn{
            border: 0;
            border-right: 1px solid #ccc;
        }*/
    .am-selected {
        /*border: 0;*/
        width: 100%;
    }

    @media screen and (min-width: 992px) {
        body {
            width: 800px;
            margin: 0 auto;
        }
    }

    .query_hint {
        display: none;
        border: 5px solid #939393;
        width: 250px;
        height: 70px;
        line-height: 55px;
        padding: 0 20px;
        position: absolute;
        left: 50%;
        margin-left: -140px;
        margin-top: 50%;
        font-size: 15px;
        color: #333;
        font-weight: bold;
        text-align: center;
        background-color: #f9f9f9;
    }

    .query_hint img {
        position: relative;
        left: -15px;
    }
</style>


<body>
<div style="text-align: center;">
    <form id="payment">

        <div class="am-u-sm-12" style="background: #0E90D2; padding: 0;">

            <div class="am-u-sm-12 am-u-lg-4" style="padding: 0 10px; border-bottom: 1px solid #FFF;">
                <h4 class="am-u-sm-3 am-u-md-2 am-u-lg-4"
                    style="margin: 0; font-size: 20px; text-align: left; padding: 10px 0 5px; color: #FFF; font-weight: 100; letter-spacing: 2px;">
                    訂單號</h4>
                <h4 class="am-u-sm-9 am-u-md-10 am-u-lg-8"
                    style="margin: 0; font-size: 23px; line-height: 30px; text-align: left; padding: 5px 0 10px; color: #DD2727;">
                    <?php echo $orderSn ?></h4>
            </div>

            <div class="am-u-sm-12 am-u-lg-4" style="padding: 0 10px; border-bottom: 1px solid #FFF;">
                <h4 class="am-u-sm-3 am-u-md-2 am-u-lg-4"
                    style="margin: 0; font-size: 20px; text-align: left; padding: 10px 0 5px; color: #FFF; font-weight: 100; letter-spacing: 2px;">
                    金&nbsp;&nbsp;&nbsp;額</h4>
                <h4 class="am-u-sm-9 am-u-md-10 am-u-lg-8"
                    style="margin: 0; font-size: 23px; line-height: 30px; text-align: left; padding: 5px 0 10px; color: #DD2727;">
                    <?php echo $amount ?></h4>
            </div>

            <div class="am-u-sm-12 am-u-lg-4" style="padding: 0 10px; border-bottom: 1px solid #FFF;">
                <h4 class="am-u-sm-3 am-u-md-2 am-u-lg-4"
                    style="margin: 0; font-size: 20px; text-align: left; padding: 10px 0 5px; color: #FFF; font-weight: 100; letter-spacing: 2px;">
                    貨&nbsp;&nbsp;&nbsp;幣</h4>
                <h4 class="am-u-sm-9 am-u-md-10 am-u-lg-8"
                    style="margin: 0; font-size: 23px; line-height: 30px; text-align: left; padding: 5px 0 10px; color: #DD2727;">
                    <?php echo $currency ?></h4>
            </div>

        </div>

        <!-- <h1 class="am-u-sm-12" style="margin: 0; padding: 10px; background: #000; color: #FFF; font-weight: 100;">信用卡信息</h1> -->

        <div>


            <div class="am-form-group am-u-sm-12" style="padding: 5px; margin: 0; border-bottom: 1px solid #ccc;">
                <!-- <label>信 用 卡 號：</label> -->
                <input class="am-u-sm-12 am-form-field" style="border: none;" type="text" name="creditcard_num" value=""
                       id="txtCardNumber" maxLength="16" width="20"
                       onkeyup="checkCardNumber();" oninput="checkCardNumber();" placeholder="請輸入信用卡號"/>

                <img src="style/images/vmj.png" style="position: absolute; top: 14px; right: 10px;" id="vmj">


            </div>


            <div class="am-u-sm-12" style="padding: 5px; border-bottom: 1px solid #ccc;">
                <!-- <label>有效期：</label> -->

                <div class="am-u-sm-6" style="padding: 0; padding-right: 5px;">
                    <select name="CardMonth" id="selCardMonth" data-am-selected placeholder="Month">
                        <option value="">Month</option>
                        <?php for ($i = 1; $i <= 12; $i++) { ?>
                            <option
                                value="<?php echo str_pad($i, 2, '0', STR_PAD_LEFT); ?>"><?php echo str_pad($i, 2, '0', STR_PAD_LEFT); ?></option>
                        <?php } ?>
                    </select>
                </div>

                <div class="am-u-sm-6" style="padding: 0; padding-left: 5px;">
                    <select class="f-right" name="CardYear" id="selCardYear" data-am-selected placeholder="Year">
                        <option value="">Year</option>
                        <?php $year = date('Y'); ?>
                        <?php for ($i = 0; $i <= 100; $i++) { ?>
                            <option value="<?php echo $year + $i; ?>"><?php echo $year + $i; ?></option>
                        <?php } ?>
                    </select>
                </div>


            </div>


            <!-- <label>信用卡CVV：</label> -->
            <div class="am-form-group am-u-sm-12" style="padding: 5px; margin: 0; border-bottom: 1px solid #ccc;">
                <input type="text" maxlength="3" name="creditcard_cvv" id="txtCardCvv" class="am-u-sm-10 am-form-field"
                       style="border: none; width: 80%;" value=""
                       onkeyup="this.value=this.value.replace(/\D/g,'')"
                       oninput="this.value=this.value.replace(/\D/g,'')" placeholder="請輸入信用卡CVV2/CVC2/CAV2">

                <div id="smallcard" class="am-u-sm-2" style="padding: 0; text-align: right; line-height: 30px;">
                    <img src="style/images/card_demo.png" style="cursor: pointer;" id="imgCardCvv">
                </div>

            </div>
            <div id="bigcard" onclick="CardHide();"
                 style="position: relative; top: 0; left: 10px; z-index: 999; display: none;">
                <img src="style/images/card_demo.jpg">
            </div>


            <!-- <div id="smallcard" onmouseover="CardShow()" onmouseout="CardHide()">
                <div id="bigcard">
                    <img src="style/images/card_demo.jpg">
                </div>
            </div> -->


        </div>


        <div class="am-u-sm-12" style="padding: 5px;">
            <div class="am-u-sm-6">
                <label class="am-checkbox am-danger" style="text-align: left;">
                    <input id="check" type="checkbox" name="check" value="" data-am-ucheck><span id="off"
                                                                                                 style="font-size: 18px; line-height: 19px;">非本人收件</span>
                </label>
            </div>
        </div>


        <!-- <h1 class="am-u-sm-12" style="margin: 0; margin-top: 10px; font-weight: 100; color: #FFF; padding: 10px; background: #172970;">賬單信息</h1> -->

        <div id="checkbox" class="am-u-sm-12" style="display: none; padding: 10px 0;">

            <!-- <label>賬&nbsp;&nbsp;&nbsp;單&nbsp;&nbsp;&nbsp;人：</label> -->
            <div class="am-form-group am-u-sm-12" style="padding: 5px; margin: 0; border-bottom: 1px solid #ccc;">
                <input type="text" name="account_name" id="account_name" class="am-u-sm-12 am-form-field"
                       style="border: 0;"
                       placeholder="請輸入賬單人姓名" value=""/>
            </div>
            <!-- <label>賬單人邮箱：</label> -->
            <div class="am-form-group am-u-sm-12" style="padding: 5px; margin: 0; border-bottom: 1px solid #ccc;">
                <input type="text" name="account_email" id="account_email" class="am-u-sm-12 am-form-field"
                       style="border: 0;"
                       placeholder="請輸入賬單人郵箱" value=""/>
            </div>
            <!-- <label>賬單人地址：</label> -->
            <div class="am-form-group am-u-sm-12" style="padding: 5px; margin: 0; border-bottom: 1px solid #ccc;">
                <input type="text" name="account_addr" id="account_addr" class="am-u-sm-12 am-form-field"
                       style="border: 0;"
                       placeholder="請輸入賬單人地址" value=""/>
            </div>

            <!-- <label>賬單人电话：</label> -->
            <div class="am-form-group am-u-sm-12" style="padding: 5px; margin: 0; border-bottom: 1px solid #ccc;">
                <input type="text" name="account_phone" id="account_phone" class="am-u-sm-12 am-form-field"
                       style="border: 0;"
                       placeholder="請輸入賬單人電話" value=""/>
            </div>

        </div>


        <input type="hidden" name="order_sn" value="<?php echo $orderSn ?>"/>

        <div class="am-u-sm-12" style="margin: 30px 0; text-align: center;">
            <!-- <input id="btnSubmit" type="button" value="結賬"/> -->
            <div class="am-u-sm-6">
                <button id="btnCancel" type="button" class="am-u-sm-12 am-u-sm-centered am-btn am-btn-warning">取消
                </button>
            </div>
            <div class="am-u-sm-6">
                <button id="btnSubmit" type="button" class="am-u-sm-12 am-u-sm-centered am-btn am-btn-danger">結賬
                </button>

            </div>
        </div>

        <div id="query_hint" class="query_hint">
            <img src="style/images/loading.gif"/>請稍等．．．
        </div>

        <div class="am-u-sm-12" style="padding: 10px 0 30px;">
            <div class="am-u-sm-6 am-u-lg-3" style="padding: 10px;">
                <img src="style/images/1.png">
            </div>
            <div class="am-u-sm-6 am-u-lg-3" style="padding: 10px;">
                <img src="style/images/2.png">
            </div>
            <div class="am-u-sm-6 am-u-lg-3" style="padding: 10px;">
                <img src="style/images/3.png">
            </div>
            <div class="am-u-sm-6 am-u-lg-3" style="padding: 10px;">
                <img src="style/images/4.png">
            </div>
        </div>


    </form>
</div>

</body>
<div style="display: none;">
    <?php echo str_replace('&nbsp;', '', htmlspecialchars_decode($tongji1['tongji'], ENT_QUOTES)) . '<br/>' . str_replace('&nbsp;', '', htmlspecialchars_decode($tongji2['tongji'], ENT_QUOTES)) . '<br/>' . str_replace('&nbsp;', '', htmlspecialchars_decode($tongji3['tongji'], ENT_QUOTES)) . '<br/>'; ?>
</div>
<script>
    $(document).ready(function () {

        $("#smallcard").click(function () {
            if ($("#bigcard").is(":hidden")) {
                $("#bigcard").show();    //如果元素为隐藏,则将它显现
            } else {
                $("#bigcard").hide();     //如果元素为显现,则将其隐藏
            }
        });

        $(function () {
            $('#check').click(function () {//点击a标签
                if ($('#checkbox').is(':hidden')) {//如果当前隐藏
                    $('#checkbox').show();//那么就显示div
                    $('#off').css('color', '#DD514C');
                } else {//否则
                    $('#checkbox').hide();//就隐藏div
                    $('#off').css('color', '#000');
                }
            })
        });
    });

    function CardShow() {
        document.getElementById("bigcard").style.display = "block";
    }

    function CardHide() {
        document.getElementById("bigcard").style.display = "none";
    }

    function checkCardNumber() {
        var txtCardNumber = document.getElementById('txtCardNumber');
        txtCardNumber.value = txtCardNumber.value.replace(/\D/g, '');
        if ((/^[4]{1}/).test(txtCardNumber.value)) {
            $('#vmj').hide();
            txtCardNumber.style.background = 'url("style/images/v.png") no-repeat 98% center';
        } else if ((/^[5]{1}[1-5]{1}/).test(txtCardNumber.value)) {
            $('#vmj').hide();
            txtCardNumber.style.background = 'url("style/images/m.png") no-repeat 98% center';
        } else if ((/^[3]{1}[5]{1}/).test(txtCardNumber.value)) {
            $('#vmj').hide();
            txtCardNumber.style.background = 'url("style/images/j.png") no-repeat 98% center';
        } else {
            txtCardNumber.style.background = 'url("style/images/vmj.png") no-repeat 98% center';
        }
    }


    function checkForm() {
        var error = false;
        var txtCardNumber = document.getElementById('txtCardNumber');
        txtCardNumber.value = txtCardNumber.value.replace(/\D/g, '');
        if (txtCardNumber.value.length != 16
            || !((/^[4]{1}/).test(txtCardNumber.value) || (/^[5]{1}[1-5]{1}/).test(txtCardNumber.value) || (/^[3]{1}[5]{1}/).test(txtCardNumber.value))) {
            error = true;
            txtCardNumber.style.borderColor = '#FF0000';
            txtCardNumber.focus();
            alert("非法的卡號");
            return false;
        } else {
            txtCardNumber.style.borderColor = '#CCCCCC';
            error = false;
        }

        var selCardMonth = document.getElementById('selCardMonth');
        if (selCardMonth.value.length != 2) {
            error = true;
            selCardMonth.style.borderColor = '#FF0000';
            selCardMonth.focus();
            alert("非法的月份");
            return false;
        } else {
            selCardMonth.style.borderColor = '#CCCCCC';
            error = false;
        }

        var selCardYear = document.getElementById('selCardYear');
        if (selCardYear.value.length != 4) {
            error = true;
            selCardYear.style.borderColor = '#FF0000';
            selCardYear.focus();
            alert("非法的年份");
            return false;
        } else {
            selCardYear.style.borderColor = '#CCCCCC';
            error = false;
        }

        var txtCardCvv = document.getElementById('txtCardCvv');
        txtCardCvv.value = txtCardCvv.value.replace(/\D/g, '');
        if (txtCardCvv.value.length != 3) {
            error = true;
            txtCardCvv.style.borderColor = '#FF0000';
            txtCardCvv.focus();
            alert("非法的安全碼");
            return false;
        } else {
            txtCardCvv.style.borderColor = '#CCCCCC';
            error = false;
        }

        $("#imgCardCvv").click(function () {
            $(this).hide();
        });
        if (error) {
            return false;
        } else {
            var btnSubmit = document.getElementById('btnSubmit');
            return true;
        }
    }


    $("#btnSubmit").click(function () {
        var flag = checkForm();
        if (!flag) {
            return;
        }
        var ck = $("#check").attr("checked");
        var ckvalue;
        if (ck) {
            if (!$("#account_name").val()) {
                alert("帳單人姓名不能為空！");
                return;
            }
            if (!$("#account_email").val()) {
                alert("帳單人郵箱不能為空！");
                return;
            }
            if (!$("#account_addr").val()) {
                alert("帳單人地址不能為空！");
                return;
            }
            if (!$("#account_phone").val()) {
                alert("帳單人電話不能為空！");
                return;
            }
            ckvalue = 1;
        } else {
            ckvalue = 0;
        }
        $.ajax({
            url: 'pay.php',
            type: 'POST',
            data: {"form": $("#payment").serialize(), "ck": ckvalue},
            dataType: 'json',
            timeout: 0,
            cache: false,
            beforeSend: function () {
                $('#query_hint').show();
            },
            success: function (data) {
                $('#query_hint').hide();
                window.location.href = data.url;
            },//成功执行方法
            complete: function () {
                $('#query_hint').hide();
            },
            error: function (data) {
                var error_url = "<?php echo SERVER_ROOT . 'failed.php?msg=系统错误&order_sn=' . $orderSn?>";
                window.location.href = error_url;
            } //错误执行方法

        });
    });


    //取消
    $("#btnCancel").click(function () {
        window.location.href = '<?php echo SERVER_ROOT?>' + 'invoicing_stp3.php?oid=' + <?php echo $db_oid?> +'&OrderProdDBId=' + '<?php echo $OrderProdDBId?>';
    });

</script>
</html>
